<template>
  <div class="home">
    <div class="slider">
      <el-carousel :interval="5000" arrow="always">
        <el-carousel-item>
          <img src="@/assets/img/poster1.jpg" width="100%" height="100%" alt />
        </el-carousel-item>
        <el-carousel-item>
          <img src="@/assets/img/poster2.jpg" width="100%" height="100%" alt />
        </el-carousel-item>
        <el-carousel-item>
          <img src="@/assets/img/poster3.jpg" width="100%" height="100%" alt />
        </el-carousel-item>
      </el-carousel>
    </div>
    <searchbar></searchbar>
    <frame></frame>
    <div class="about_company">
      <img src="@/assets/img/HomeAboutBj.png" width="100%" alt />
      <span class="abouttext">关于凯盈+</span>
      <div class="text_intro">
        <p>
          Lorem ipsum dolor sit amet consectetur, adipisicing elit. Itaque
          maiores neque quidem consequuntur sint, consectetur fugiat nostrum
          nisi deserunt blanditiis modi officiis cum hic, maxime velit ad
          corporis obcaecati saepe accusantium veniam sapiente commodi
          asperiores adipisci sed. Veritatis, sapiente unde?
        </p>
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatibus
          soluta maiores quibusdam non odit error, alias doloribus numquam,
          impedit ex nostrum vero veniam eum nihil incidunt. Incidunt placeat
          quo voluptate.
        </p>
        <div class="card_container">
          <div class="card_item">
            <img src="@/assets/img/homeabout1.jpg" width="100%" alt />
            <p>招聘12.9高级系列为主</p>
          </div>
          <div class="card_item">
            <img src="@/assets/img/homeabout2.jpg" width="100%" alt />
            <p>招聘12.9高级系列为主</p>
          </div>
          <div class="card_item">
            <img src="@/assets/img/homeabout3.jpg" width="100%" alt />
            <p>招聘12.9高级系列为主</p>
          </div>
          <div class="card_item">
            <img src="@/assets/img/homeabout4.jpg" width="100%" alt />
            <p>招聘12.9高级系列为主</p>
          </div>
        </div>
      </div>
    </div>
    <div class="about_new">
      <img src="@/assets/img/HomeNewsTitle.png" alt />
      <span class="new_title">新闻动态</span>
      <div class="info_container left">
        <div class="titles">汽车底盘螺母相关知识</div>
        <ul>
          <li>如何提高汽车底盘凸焊质量</li>
          <li>如何提高汽车底盘凸焊质量</li>
          <li>如何提高汽车底盘凸焊质量</li>
          <li>如何提高汽车底盘凸焊质量</li>
          <li>如何提高汽车底盘凸焊质量</li>
          <li>如何提高汽车底盘凸焊质量</li>
          <li>如何提高汽车底盘凸焊质量</li>
        </ul>
      </div>
      <div class="info_container right">
        <div class="titles">高强度地盘螺栓行业资讯</div>
        <ul>
          <li>汽车底盘凸焊质量不佳的原因</li>
          <li>汽车底盘凸焊质量不佳的原因</li>
          <li>汽车底盘凸焊质量不佳的原因</li>
          <li>汽车底盘凸焊质量不佳的原因</li>
          <li>汽车底盘凸焊质量不佳的原因</li>
          <li>汽车底盘凸焊质量不佳的原因</li>
          <li>汽车底盘凸焊质量不佳的原因</li>
          <!-- <li>汽车底盘凸焊质量不佳的原因</li> -->
        </ul>
      </div>
      <div class="imgsC">
        <img src="@/assets/img/homeNews.jpg" alt />
      </div>
    </div>
    <div class="frends_link">
      <div class="link_container">
        <span>友情连接:</span>
        <a
          v-for="(item, index) in superLink"
          :key="index"
          :href="item.linkurl"
          class="islink"
          >{{ item.linkname }}</a
        >
        <!-- <span class="islink">百度一下，你就知道</span> -->
      </div>
    </div>
  </div>
</template>

<script>
import searchbar from '@/components/smallComponent/search.vue'
import frame from '@/components/smallComponent/frame.vue'
export default {
  components: {
    searchbar,
    frame,
  },
  data() {
    return {
      input1: '',
      superLink: [],
    }
  },
  mounted() {
    this.getSuperLink()
  },
  methods: {
    goodDetail() {
      this.$store.commit('changeSelectIndex', 6)
      this.$router.push('/goodinfo')
    },
    async getSuperLink() {
      let res = await this.$api.good.getSuperLink()
      if (res.data.code === 200) {
        this.superLink = res.data.result
      }
    },
  },
}
</script>

<style lang="less" scoped>
.el-carousel__item h3 {
  color: #475669;
  font-size: 18px;
  opacity: 0.75;
  line-height: 300px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}

.searchbar {
  margin: 5px 0;
  border-top: 1px solid rgb(205, 205, 205);
  border-bottom: 1px solid rgb(205, 205, 205);
  .search_barcontainer {
    width: 1460px;
    height: 45px;
    margin: 0 auto;
    display: flex; //  弹性布局
    justify-content: space-between; //  主轴
    align-items: center; //  对比轴
  }
  .my-autocomplete {
    li {
      line-height: normal;
      padding: 7px;

      .name {
        text-overflow: ellipsis;
        overflow: hidden;
      }
      .addr {
        font-size: 12px;
        color: #b4b4b4;
      }

      .highlighted .addr {
        color: #ddd;
      }
    }
  }
}

.goodtype {
  width: 1180px;
  // height: 300px;
  // background-color: skyblue;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  > div:nth-child(1) {
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    > div {
      width: 240px;
      padding-top: 10px;
      // height: 60px;
      background-color: rgb(30, 150, 237);
      padding-right: 10px;
      ul {
        list-style: none;
        li {
          width: 100%;
          text-align: right;
          margin: 10px 0;
          color: #fff;
          color: rgb(245, 237, 249);
          font-size: 17px;
        }
      }
    }
  }
  > div:nth-child(2) {
    transform: translateY(2px);
    position: relative;
    .title_text {
      position: absolute;
      top: 8px;
      left: 30px;
      color: rgb(101, 101, 101);
      font-size: 17px;
    }
    .good_container {
      display: flex;
      width: 890px;
      justify-content: space-between;
      flex-wrap: wrap;
      > .good_item {
        width: 24%;
        margin-bottom: 10px;
        > img {
          width: 100%;
        }
        > p {
          text-align: center;
        }
      }
    }
    .infotext {
      width: 890px;
      ul {
        list-style: none;
        li {
          h3,
          p {
            margin: 8px 0;
          }
          p {
            color: rgb(101, 101, 101);
          }
        }
      }
    }
  }
}

.about_company {
  margin: 10px 0;
  position: relative;
  .abouttext {
    position: absolute;
    // top: 50%;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 17px;
    color: rgb(101, 101, 101);
  }
  .text_intro {
    width: 1180px;
    // height: 300px;
    // background-color: skyblue;
    margin: 0 auto;
    > p {
      text-indent: 2em;
      color: rgb(101, 101, 101);
    }
    > .card_container {
      margin-top: 30px;
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      p {
        text-align: center;
        color: rgb(101, 101, 101);
      }
    }
  }
}
.about_new {
  width: 1130px;
  margin: 0 auto;
  display: flex;
  height: 430px;
  position: relative;
  margin-top: 20px;
  margin-bottom: 20px;
  > .new_title {
    position: absolute;
    left: 50%;
    font-size: 17px;
    color: rgb(101, 101, 101);
    transform: translateX();
    top: 10px;
  }
  > img {
    margin: 0 auto;
    // he
    width: 746px;
    height: 66px;
  }
  > .info_container {
    position: absolute;
    width: 400px;
    height: 367px;
    background-color: rgb(238, 238, 238);
    top: 60px;
    > .titles {
      background-color: rgb(10, 162, 233);
      position: absolute;
      color: #fff;
      padding: 5px 10px;
      top: -15px;
      left: 25px;
    }
    ul {
      margin: 25px 50px;
      padding-top: 2px;
      > li {
        margin: 20px 0;
        color: rgb(101, 101, 101);
      }
    }
  }
  > .left {
    left: 0;
  }
  > .right {
    right: 0;
  }
  .imgsC {
    position: absolute;
    left: 50%;
    transform: translateX(-60%);
    top: 60px;
  }
}
.frends_link {
  width: 100%;
  // border-bottom: 5px solid rgb(48, 144, 242);
  padding: 30px 0 20px 0;
  .link_container {
    width: 1180px;
    margin: 0 auto;
    .islink {
      color: rgb(10, 162, 233);
      margin: 0 10px;
      text-decoration: none;
    }
  }
}
// .bank {
//   display: flex;
//   flex-direction: column;
//   justify-content: center;
//   align-items: center;
//   color: rgb(101, 101, 101);
//   padding-top: 20px;
//   > div {
//     margin: 5px 0;
//     > ul {
//       list-style: none;
//       display: flex;
//     }
//   }
//   > div:nth-child(1) {
//     > ul {
//       > li {
//         color: #000;
//         margin: 0 20px;
//         font-weight: bold;
//       }
//     }
//   }
//   > div:nth-child(2) {
//     > ul {
//       > li {
//         margin: 0 20px;
//         font-weight: bold;
//       }
//     }
//   }
//   p {
//     margin: 5px 0;
//   }
// }
</style>
